/**
 *@author：yc
 *@pramas: 
  * "inputText"，String,绑定的文本输入框
  * "queryInterUrl",String,联想匹配数据的查询接口地址
 * 备注：
 */
<template>
	<el-autocomplete
		class="inline-input"
		v-model="inputData[queryParamName]"
		:fetch-suggestions="filterSearch"
		placeholder="请输入"
		:trigger-on-focus="false"
		@select="handleSelect">
	</el-autocomplete>
</template>

<script>
	import Message from 'element-ui';
	export default {
		name:'m-input-auto-comp',
		props: {
			inputData: { // 绑定的输入框文本数据
			    type: Object,
				default () {          
					return  {}        
				} 
			},
			queryInterUrl: { // 联想匹配数据的查询接口路径
			  type: String,
			  default: ''
			},
			queryParamName: { // 查询接口参数名
			  type: String,
			  default: 'name'
			},
//			inputDataName: { // 绑定数据的属性名
//			  type: String,
//			  required: false,
//			  default: 'id'
//			},
//			isTransToId: { // 是否需要将name转换成ID
//			  type: Boolean,
//			  required: false,
//			  default: false
//			},
	  },
	data () {
		return {
			searchDatas:[],
		}
	},
	computed:{
//		inputText(){
//			return this.inputData[this.queryParamName];
//		},
		queryParam(){
			var param = {};
			param[this.queryParamName] = '';
			return param;
		}
	},
	mounted() {
		this.queryDatas();
	},
	watch:{
// 		searchDatas:function(newVal,oldVal){
// 			
// 		}
	},
	methods: {
		filterSearch(queryStr, cb){
			var datas = this.searchDatas;
//			console.log(queryStr);
			console.log(datas);
			var results =[];
			for(var data of datas){
				if (!queryStr || data.name.toLowerCase().indexOf(queryStr.toLowerCase()) >= 0){
					var res ={};
					res['value']=data.name;
					results.push(res);
				}
			}
//			console.log(results);
//			var results = queryStr ? datas.filter((data) => data.name.toLowerCase().indexOf(queryStr.toLowerCase()) > 0) : datas;
			cb(results); // 调用 callback 返回建议列表的数据
		},
		/*查询接口*/
		queryDatas(){
			this.$httpExt().get(this.queryInterUrl, this.queryParam).then((response) => {
				var rows= response.rows;
				console.log('query input num: ' +response.totalSize);
				this.searchDatas = rows;
			},(response) => {
				Message({
					message: '服务器请求失败，请重试！',
					type: 'warning'
				});
			});
		},
		handleSelect(item) {
			this.inputData[this.queryParamName]=item.value;
//			if(this.isTransToId){
//				var data = this.searchDatas.find((element) => (element.name == item.value));
//				this.inputData[this.inputDataName]=data.id;
//			}
			console.log(this.inputData);
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
// .linecharts{
//     width: 100%;
// }
</style>
